<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">搜索列表</block>
		</cu-custom>
		<!-- 搜索框 -->
		<u-search :placeholder="placeholder" shape="round" :show-action="true" action-text="搜索" :animation="true" :clearabled="true" v-model="keyword"  margin="20rpx" @custom="SearchContext"></u-search>
		<view v-if="searchType == '' && list.length === 0">
			<view class="py-5 flex align-center justify-center">
				<text class="font text-light-muted">搜索指定内容</text>
			</view>
			
			<view class="px-4 flex flex-wrap">
				<view class="flex align-center justify-center mb-3  " style="width: 223rpx;" v-for="(item,index) in typeList" :key="index" @click="changeSearchType(item)">
					<text class="font text-hover-primary">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<free-list-item v-for="(item,index) in list" :key="index"
		:title="item.nickname ? item.nickname : item.username"
		:cover="item.avatar ? item.avatar : '/static/images/userpic.png'"
		@click="openUserBase(item.id)"></free-list-item>
	</view>
</template>

<script>
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	export default {
		components: {
			freeListItem
		},
		data() {
			return {
				keyword:'',
				typeList:[{
					name:"聊天记录",
					key:"history"
				},{
					name:"用户",
					key:"user"
				},{
					name:"群聊",
					key:"group"
				}],
				searchType:"",
				keyword:"",
				list:[]
			}
		},
		computed: {
			placeholder() {
				let obj = this.typeList.find((item)=>{
					return item.key === this.searchType
				})
				if(obj){
					return '搜索'+obj.name
				}
				return '请输入关键字'
			},
		},
		methods: {
			
			// 打开用户资料
			openUserBase(user_id){
				uni.navigateTo({
					url: '../../infochat/user-base?user_id='+user_id,
				});
			},
			//搜索列表
			SearchContext(){
				this.$C.post('/search/user',{
					keyword:this.keyword
				}).then(res=>{
					this.list = []
					if(res){
						this.list.push(res)
					}
				})
			},
			changeSearchType(item){
				console.log(item);
				this.searchType = item.key
			}
		}
	}
</script>

<style>

</style>
